<template>
  <div class="video-box">
    <div class="video-content" v-for="d in data" :key="d.id">
      <div class="icon-box">
        <img class="arrow" @click="goback" src="@/assets/arrow/XO.png" />
        <!-- <div class="share">
          <img class="share-icon" src="@/assets/goImages/ZZ.png" />
          <img class="more" src="@/assets/goImages/Oq.png" />
        </div> -->
      </div>
      <div class="controls">
        <video  class="video" @timeupdate="videoUpdatatime" @canplay="uptimeDuration" ref="video" @click="pauseVideo" :src="d.video_bak_url" loop autoplay></video>
        <img @click="playVideo" v-if="change" class="playvideo" src="@/assets/goImages/-B.png" />
      </div>
      <div class="information">
        <div class="master-list-content">
          <div class="imgbox">
            <img class="master-avatar_thumbnail" @click="$router.push('/authorcenter/' +  d.id)"  :src="d.send_user.avatar_thumbnail" />
            <img v-if="d.send_user.account_icon_url" class="account_icon_url" :src="d.send_user.account_icon_url" />
            <div class="master-name">{{ d.send_user.name }}</div>
          </div>

           <div v-if="!clickFo" @click="clickFollow" class="follow">+关注</div>
                <div v-else @click="clickflw" class="follow">已关注</div>
        </div>
        <div class="name">{{ d.title }}</div>
        <div class="title-box">
          <div class="title" @click="$router.push('/recommend/' + t.title)" v-for="t in d.subjects" :key="t.id">
            <img src="@/assets/goImages/sJ.png" />
            {{ t.title }}
          </div>
        </div>
        <div class="exhibition" @click="$router.push('/businesses/' + d.business.id)">
          <img  src="@/assets/goImages/dv.png" />
          {{ d.feed?.tiny_title }}
        </div>
        <van-slider v-model="progress" @change="onChange" active-color="white" inactive-color="#777" button-size="12px" />
        <div class="comment-item">
          <div class="like_count" @click.stop="changeHeart(d)">
            <img v-if="d.heart" class="like_count-img" src="@/assets/goImages/g1.png" />
            <img v-else class="like_count-img" src="@/assets/goImages/T_.png" />

            {{ d.like_count }}
          </div>
          <div class="collection" @click="collectionFeed">
            <img v-if="!collection" class="collection-img" src="@/assets/goImages/Cb.png" />
            <img v-else class="collection-img" src="@/assets/goImages/N1.png" />

            收藏
          </div>

          <div v-if="!count" @click="showPopup" class="comment_count"><img class="comment_count-img" src="@/assets/goImages/5x.png" />{{ d.comment_count }}</div>
          <div v-else @click="showPopup" class="comment_count"><img class="comment_count-img" src="@/assets/goImages/5x.png" />{{ count }}</div>
          <van-popup v-if="d.comment_count == 0" v-model="show" position="bottom" :style="{ height: '45%' }" closeable>
            <div v-if="!count" class="pop-name">评论({{ d.comment_count }})</div>
            <div v-else class="pop-name">评论({{ count }})</div>

            <img v-if="content.length == 0" class="none-icon" src="../../../assets/head/none.jpg" />
            <div class="comment-content">
              <div class="comment-text" v-for="t in content" :key="t.time">{{ t.comment }}</div>
            </div>
            <div class="comment-box">
              <div class="comment">
                <input v-model="text" class="ipt" type="text" placeholder="添加评论" />
                <button @click="sendComment(d.comment_count)" class="send">发送</button>
              </div>
            </div>
          </van-popup>
          <van-popup v-else v-model="show" position="bottom" :style="{ height: '45%' }" closeable>
            <div v-if="!count" class="pop-name">评论({{ d.comment_count }})</div>
            <div v-else class="pop-name">评论({{ count }})</div>
            <div class="comment-content">
              <div class="comment-text" v-for="c in comment[0]" :key="c.id">
                <img class="head-img" :src="c.from_user.avatar_thumbnail" />
                <div class="text-box">
                  <div class="user-name">{{ c.from_user.name }}：{{ c.content }}</div>
                  <div class="time">{{ date(c.timestamp) }}</div>
                </div>
              </div>
              <div class="comment-text" v-for="t in content" :key="t.time">{{ t.comment }}</div>
            </div>
            <div class="comment-box">
              <div class="comment">
                <input v-model="text" class="ipt" type="text" placeholder="添加评论" />
                <button @click="sendComment(d.comment_count)" class="send">发送</button>
              </div>
            </div>
          </van-popup>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
import { changeRedheart } from '@/utils/fabulous/index'
export default {
  props: ['id'],
  data() {
    return {
      data: [],
      comment: [],
      content: [],
      text: '',
      value: 0,
      duration: 0,
      change: false,
      show: false,
      count: null,
      collection: false,
            clickFo:false,

    }
  },

  created() {
    this.RequestVideo()
    this.RequestComment()
    let collections = JSON.parse(localStorage.getItem('collections')) || []
    collections.some((item) => {
      if (item.id == this.id) {
        this.collection = true
        return true
      }
    })
  },
  props: ['id'],

  computed: {
    progress: {
      get() {
        return (this.value / this.duration) * 100
      },
      set(value) {
        this.value = (value / 100) * this.duration
      }
    },
    date: function () {
      return function (ItemTime) {
        let date = new Date().getTime()
        let time = ItemTime * 1000
        let timeInterval = date - time
        if (timeInterval > 2592000000) {
          let mouth = new Date(time).getMonth() + 1
          let day = new Date(time).getDate()
          mouth = mouth < 10 ? '0' + mouth : mouth
          day = day < 10 ? '0' + day : day
          return mouth + '-' + day
        } else if (timeInterval < 3600000) {
          let minute = parseInt(timeInterval / 60000)
          return minute + '分钟前'
        } else {
          let beforeTime = parseInt(timeInterval / 3600000)
          if (beforeTime > 24) {
            let dayTime = parseInt(beforeTime / 24)
            return dayTime + '天前'
          }
          return beforeTime + '小时前'
        }
      }
    }
  },
  methods: {
    changeHeart(f) {
      let thisSet = this.$set
      changeRedheart(f, thisSet)
    },

    //收藏
    async collectionFeed() {
      /*
      收藏
      请求地址：https://api.xmonster.cn/v2/user/favorite/feeds/6364
      请求方式：put
      请求头：
      {
      authorization：Token token=7b07e3875b838c9470a46510db4c1975
      }

      取消收藏
      请求地址：https://api.xmonster.cn/v2/user/favorite/feeds/6364
      请求方式：delete
      请求头：
      {
        authorization：Token token=7b07e3875b838c9470a46510db4c1975
      }  
      */
      if (this.collection) {
        const data1 = await axios.delete('/v2/user/favorite/feeds/' + this.id, {
          headers: {
            authorization: 'Token token=7b07e3875b838c9470a46510db4c1975'
          }
        })
        if (data1.message == 'success') {
          this.collection = false
          let collections = JSON.parse(localStorage.getItem('collections')) || []
          collections = collections.filter((item) => item.id !== this.id)
          localStorage.setItem('collections', JSON.stringify(collections))
          this.$toast('取消收藏')
        }
      } else {
        const data = await axios({
          url: 'https://api.xmonster.cn/v2/user/favorite/feeds/' + this.id,
          method: 'put',
          headers: {
            authorization: 'Token token=7b07e3875b838c9470a46510db4c1975'
          }
        })
        if (data.message == 'success') {
          this.collection = true
          let collections = JSON.parse(localStorage.getItem('collections')) || []
          collections.push({
            id: this.id,
            collection: this.collection
          })
          localStorage.setItem('collections', JSON.stringify(collections))
          this.$toast('收藏成功')
        }
      }
    },
    async RequestVideo() {
      const video = await axios.get(`/v2/posts/${this.id}`)
      this.data.push(video)
      console.log(this.data)
    },
    async RequestComment() {
      const comment = await axios.get(`/v2/posts/${this.id}/comments`)
      this.comment.push(comment)
      // console.log(comment)
    },
    goback() {
      this.$router.go(-1)
    },
    onChange() {
      this.$refs.video[0].currentTime = this.value
    },
    playVideo() {
      this.$refs.video[0].play()

      this.change = false
    },
    pauseVideo() {
      this.$refs.video[0].pause()
      this.change = true
    },
    videoUpdatatime() {
      this.value = this.$refs.video[0].currentTime
    },
    uptimeDuration() {
      this.duration = this.$refs.video[0].duration
    },
    showPopup() {
      this.show = true
    },
    sendComment(count) {
      if (this.text == '') {
        return
      }
      this.content.push({
        comment: this.text,
        time: new Date().getTime()
      })
      this.text = ''
      this.count = this.content.length + count
    },
     clickFollow(){
      this.clickFo=true
      
    },
      clickflw(){
      this.clickFo=false
      
    },
  }
}
</script>

<style lang="less" scoped>
.video-box {
  width: 100vw;
  height: 100vh;
  background-color: black;
  .video-content {
    video::-webkit-media-controls-fullscreen-button {
      display: none;
    }
    .icon-box {
      margin: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      .arrow {
        margin-left: 5px;
        width: 30px;
        height: 30px;
        display: block;
      }
      .share {
        display: flex;
        align-items: center;
        .share-icon {
          width: 18px;
          height: 18px;
          display: block;
        }
        .more {
          margin-left: 10px;
          width: 30px;
          height: 30px;
          display: block;
        }
      }
    }
    .controls {
      position: relative;

      .video {
        width: 100vw;
        height: 60vh;
      }
      .playvideo {
        position: absolute;
        width: 60px;
        height: 60px;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
    }

    .information {
      margin-top: 10px;
      .master-list-content {
        padding: 0 15px;
        display: flex;
        align-items: center;
        color: white;

        .imgbox {
          position: relative;
          display: flex;
          align-items: center;

          .master-avatar_thumbnail {
            width: 32px;
            height: 32px;
            display: block;
          }
          .account_icon_url {
            position: absolute;
            left: 25px;
            top: 0;
            width: 12px;
            height: 12px;
          }

          .master-name {
            font-size: 13px;
            margin-left: 10px;
          }
        }

        .follow {
          display: flex;
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid white;
          border-radius: 5px;
          font-size: 13px;
          margin-left: 10px;
        }
      }
      .name {
        padding: 0 15px;
        color: white;
        font-size: 12px;
        margin: 10px 0;
      }
      .title-box {
        margin: 0 15px;
        font-size: 13px;
        display: flex;
        img {
          width: 13px;
          height: 13px;
          display: block;
          margin-right: 3px;
        }
        .title {
          display: flex;
          margin-right: 5px;
          color: rgb(70, 157, 217);
        }
      }
      .exhibition {
        display: flex;
        height: 30px;
        font-size: 14px;
        justify-content: center;
        align-items: center;
        margin: 10px 15px;
        color: white;
        border: 1px solid #4c4c4c;
        border-radius: 999px;
        background-color: #4c4c4c;
        img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
          display: block;
        }
      }

      .comment-item {
        font-size: 12px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .pop-name {
          color: black;
          margin-top: 16px;
          margin-left: 5px;
          font-size: 14px;
          font-weight: 500;
        }
        .comment-content {
          margin-bottom: 52px;
          color: black;
          .comment-text {
            display: flex;
            width: 100%;
            height: 60px;
            align-items: center;
            border-bottom: 1px solid #ddd;
            .head-img {
              width: 30px;
              height: 30px;
              display: block;
            }
            .text-box {
              display: flex;
              flex-direction: column;
              margin-left: 10px;
              .user-name {
                color: black;
              }
              .time {
                margin-top: 10px;
              }
            }
          }
        }
        .none-icon {
          width: 180px;
          height: 180px;
          display: block;
          margin: auto;
        }
        .comment-box {
          background-color: rgb(240, 240, 240);
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          .comment {
            display: flex;
            padding: 10px;
            .ipt {
              width: 300px;
              height: 30px;
              border: none;
              color: black;
            }
            .send {
              margin-left: 7px;
              border: none;
              background-color: rgb(240, 240, 240);
              color: red;
            }
          }
        }

        .comment_count {
          display: flex;
          align-items: center;

          .comment_count-img {
            margin-right: 2px;

            width: 20px;
            height: 20px;
            display: block;
          }
        }
        .like_count {
          display: flex;
          align-items: center;

          .like_count-img {
            margin-right: 2px;
            width: 20px;
            height: 20px;
            display: block;
          }
        }
        .collection {
          display: flex;
          align-items: center;

          .collection-img {
            margin-right: 2px;

            width: 20px;
            height: 20px;
            display: block;
          }
        }
      }
      .van-slider {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
